<template>
  <div>
    <Header></Header>
    <Banner></Banner>
    <div class="main">
      <div class="main-left">
        <li  @click="$router.push('/wz')" v-if="this.author == 2">
           <i class="iconfont icon-all-wenzhang"></i>
            我的文章
        </li>
        <li  @click="$router.push('/sc')">
            <i class="iconfont icon-all-xiangqu"></i>
            我的收藏
        </li>
        <li  @click="$router.push('/wd')">
           <i class="iconfont icon-all-wendabangzhu"></i> 
            我的问答
        </li>
        <li  @click="$router.push('/pl')">
            <i class="iconfont icon-all-pinglun"></i> 
            我的评论
         </li>
        <li  @click="$router.push('/dy')">
            <i class="iconfont icon-all-yonghuming"></i>
            我的订阅
        </li>
        <li   @click="$router.push('/ds')">
            <i class="iconfont icon-all-qian"></i>
            我的打赏
        </li>
        <li  @click="$router.push('/tz')" class="active">
          <i class="iconfont icon-all-tongzhi"></i>
          通知中心
        </li>
        <li  @click="$router.push('/ll')">
          <i class="iconfont icon-all-liulan"></i>
          浏览记录
        </li>
        <li  @click="$router.push('/sz')">
          <i class="iconfont icon-all-icon_setting"></i>
          资料设置
        </li>
      </div>
      <div class="main-right">
          <div class="nav">
              <span @click="ds" v-bind:class="{ active1: isActive1}">系统消息</span>
              <span  @click="sy" v-bind:class="{ active2: isActive2}">问答消息</span>           
          </div>
          <div v-if="no" style="text-align: center; font-size:16px;padding-top:10px; ">您还没有通知</div>
          <div v-if="nomoney" style="text-align: left; font-size:16px;padding-top:10px;">暂未收到任何消息</div>
          <div class="content" v-if="yes">
              <p>提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴</p>   
              <li >                 
              </li>
          </div>
          <div class="content" v-if="yesmoney">
              <p>提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴</p>   
              <li >                 
              </li>
          </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/common/Header/Header";
import Footer from "@/common/Footer/Footer";
import Banner from "@/common/Banner/Banner";
export default {
  name: "tz",
  data() {
    return {
        no:true,
        yes:false,
        nomoney:false,
        yesmoney:true,
         isActive1: true,
      isActive2: false,
      author:'',
    };
  },
  methods:{
  ds(){
       this.no= true;
       this.yes=false;
       this.nomoney=false;
       this.yesmoeny=false;
       this.isActive1=true;
       this.isActive2 =false;
      },
     sy(){
        this.no= false;
       this.yes=false;
       this.nomoney=true;
       this.yesmoeny=false;
       this.isActive1=false;
       this.isActive2 =true;
      }
  },
  mounted () {
      this.author =this.getCookie("identity_type") 
  },
  components: {
    Header,
    Banner,
    Footer
  }
};
</script>
<style lang="scss" scoped>
   .main{
     width: 60%;
     height: auto;
     margin: 0 auto;
     margin-top:30px;
     margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
     .main-left{
         width: 230px;
         background-color: #fff;
         li{
             padding:20px;
             list-style: none;
             border-left: 1px solid transparent;
             font-size: 18px;
             cursor: pointer;
         }
         .active{
             background-color: #f2f5fb;
            border-left: 1px solid #5079b7;
            color: #5079b7;
         }
     }
     .main-right{
       text-align: left;
       width: 900px;
       background-color: #fff;
        padding: 20px;
        margin-left:30px;
        .nav{
            line-height: 1.8;
            border-bottom: 1px solid #5079b7;
            span{
                padding-bottom: 8px;
                display: inline-block;
                margin-right: 10px;
            }
            .money{
                margin-left:325px
            }
                 .active1{
           border-bottom: 1px solid #5079b7;
           color:#5079b7;
      }
      .active2{
           border-bottom: 1px solid #5079b7;
           color:#5079b7;
      }

        }
        .content{
            p{
                font-size: 12px;
                color: red;
                padding-top: 12px;
            }
            li{
                list-style: none;
                border-bottom: 1px solid #666;
                padding-bottom:12px;
            }
        }
     }
   }
</style>


